<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输出成绩表</title>
<style>
body{text-align:center;
font-family:微软雅黑}
label{
margin-left:20px;}
.report{width:560px;
margin:30px auto;}
.title{
background: #f6f6f6;
font-size:18px;
}
.title,.content{
width:560px;
height:36px;
line-height:36px;
border: 1px solid #dddddd;}
.title div{
width:80px;
text-align:center;
float:left}
.content{
clear:both}
.content div{
width:80px;
text-align:center;
float:left}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<h2>成绩表</h2>
	<label>姓名：</label><span>{{name}}</span>
	<label>性别：</label><span>{{sex}}</span>
	<label>年龄：</label><span>{{age}}</span>
	<div class="report">
		<div class="title">
			<div>学期</div>
			<div>数学</div>
			<div>物理</div>
			<div>化学</div>
			<div>英语</div>
			<div>计算机</div>
			<div>总分</div>
		</div>
		<div class="content" v-for="(grade,index) in grades">
			<div>{{grade.term}}</div>
			<div v-for="score in grade.scores">
				<div>{{score}}</div>
			</div>
			<div>{{total(index)}}</div>
		</div>
	</div>
</div>
<script type="text/javascript">
var exam = new Vue({
	el:'#example',
	data:{
		name : '张无忌',//姓名
		sex : '男',//性别
		age : 20,//年龄
		grades : [{//学期和考试成绩
			term : '第一学期',
			scores : {
				math : 90,
				physics : 85,
				chemistry : 95,
				english : 86,
				computer : 96
			}
		},{
			term : '第二学期',
			scores : {
				math : 92,
				physics : 83,
				chemistry : 90,
				english : 88,
				computer : 95
			}
		}]
	},
	methods : {
		total : function(index){
			var total = 0;//定义总分
			var obj = this.grades[index].scores;//获取分数对象
			for(var i in obj){
				total += obj[i];
			}
    	   	return total;//返回总分
		}
	}
})
</script>


</body>

</html>



